<template>
	<view>
		<scroll-view style="position: absolute;
		bottom: 0px; top: 0px;">

		<!-- <u-toast ref="uToast1"></u-toast> -->
		<u-popup :show="sub_show" mode="bottom" @close="sub_close"  :closeable="true" overlayOpacity="0.8"
			:round="10">
			<u-toast ref="uToast1"></u-toast>
			<view :style="{height:windowsHeight*0.9+'px'}" class="pop">
				<view class="order_bottom">
					<view class="buy_box">
						<view class="left">

							<view class="price" style="margin-left: 25px;">合计￥{{amount}}</view>
						</view>
						<view class="right" @tap="$u.throttle(toPay, 500)">提交订单</view>
					</view>
				</view>
				<view style="height: 44px;"></view>

				<view class="sub_order_box" :style="{height:windowsHeight*0.9-44+'px'}">
					<u-list>
						<u-cell :icon="imageHandle(good.imagine) " :label="'×'+good.num"
							iconStyle="width: 50px;height: 50px;border-radius: 5px;" :border="false"
							v-for="good in goodCart" :key="good.id">
							<view class="title" slot="title">
								{{good.name}}
							</view>
							<view class="price" slot="value">
								￥{{good.price}}
							</view>
						</u-cell>
						<u-cell title="桌号" :value="tableId+'号桌'"></u-cell>
						<u-cell title="总计" titleStyle="font-size: 20px;" style="margin-bottom: 80px;"
							customStyle="padding-bottom: 180px;">
							<view style="font-size: 20px;" slot="value">￥{{amount}}</view>
						</u-cell>
					</u-list>

				</view>


			</view>

		</u-popup>


		<u-popup :show="add_good_show" mode="bottom" @close="add_good_close"  :closeable="true"
			overlayOpacity="0.8" :round="10" zIndex="998">
			<view :style="{height:windowsHeight*0.5+'px'}" class="pop ">
				<view style="height: 44px;"></view>

				<view class="sub_order_box" :style="{height:windowsHeight*0.5-44+'px'}">
					<u-list width="100%" height="100%">
						<view class="u_cell" v-for="good in goodCart" :key="good.id">

							<u-cell :icon="imageHandle(good.imagine)"
								iconStyle="width: 50px;height: 50px;border-radius: 5px;" :border="false">
								<view class="title" slot="title">
									{{good.name}}
								</view>
								<view class="price" slot="label">
									￥{{good.price}}
								</view>

								<u-number-box v-model="good.num" step="1" :min="0" :showMinus="good.num > 0"
									slot="value" @change="changeGood(good)">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="10"></u-icon>
									</view>
									<text slot="input" style="width: 20px;text-align: center;" class="input"
										v-show="good.num > 0">{{good.num}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="10"></u-icon>
									</view>
								</u-number-box>

							</u-cell>
						</view>


					</u-list>

				</view>


			</view>
		</u-popup>


		<view class="buy_bottom">

			<view class="buy_box">
				<view class="left" @tap="shopCart">
					<view class="img">
						<u-badge :value="count" :offset="[0,-15]" absolute="true" style="font-size: 5px;"
							:max="99"></u-badge>
						<image :src="count>0?'../../static/gouwuche-copy.png':'../../static/gouwuche-copy (1).png'">
						</image>

					</view>
					<view class="price">￥{{amount}}</view>
				</view>
				<view class="right" v-show="amount>0" @tap="$u.throttle(toBuy, 500)">去结算</view>
			</view>
		</view>

		<view class="list" :style="{height:windowsHeight+'px'}">

			<view class="left">
				<u-list>
					<u-list-item v-for="item in typeList" :key="item.id" v-if="item.dcGoodsList">
						<view class="type" @tap="typeHandle(item.id)"
							:style="{backgroundColor:item.id===clickedIndex ? 'white':'#f4f4f4'}"
							v-if="item.dcGoodsList.length>0">
							<view class="redline" :style="{backgroundColor:item.id===clickedIndex ? 'red':'#f4f4f4'}" />
							<view class="typeInfo">
								{{item.typeName}}
							</view>
						</view>

					</u-list-item>

				</u-list>
			</view>
			<scroll-view class="right" :scroll-top="scrollTop" :scroll-y="true" :scroll-into-view="toView"
				:style="lastGoodStyle">
		

				<view class="title_good_box" v-for="item in typeList" :key="item.id" v-if="item.dcGoodsList"
					:id="'aa'+item.id">
					<view v-if="item.dcGoodsList.length>0">
						<view class="type_title">
							{{item.typeName}}
						</view>
						<view class="one_good" v-for="good in item.dcGoodsList" :key="good.id">
							<view class="img" @tap="toGood(good)">
								<image :src="imageHandle(good.imagine)"></image>
							</view>
							<view class="goodInfo">
								<view @tap="toGood(good)">
									<view class="good_title">{{good.name}}</view>

									<view class="good_count">
										销量：{{good.count}}
									</view>
								</view>
								<view class="good_price">
									<view class="text">￥{{good.price}}</view>
									<view class="num_box">

										<u-number-box step="1" :min="0" disabled-input="true" v-model="good.num"
											:showMinus="good.num > 0" @change="changeGood(good)">

											<view slot="minus" class="minus">
												<u-icon name="minus" size="10"></u-icon>
											</view>
											<text slot="input" style="width: 20px;text-align: center;" class="input"
												v-show="good.num>0">{{good.num}}</text>
											<view slot="plus" class="plus">
												<u-icon name="plus" color="#FFFFFF" size="10"></u-icon>
											</view>
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</scroll-view>

		</view>

				
		</scroll-view>
	</view>
</template>

<script>
	import {
		login,
		getTypeList,
		subOrder
	} from '@/config/api.js'
	import {
		mapState
	} from 'vuex'
	import config from '@/config.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				sub_show: false,
				toView: '',
				add_good_show: false,
				anchor: null,
				windowsHeight: 200,
				clickedIndex: null,
			}
		},
		onLoad(option) {
			this.$store.state.tableId = option.tableId
			console.log(this.$store.state.tableId)
			console.log(option.tableId)
			uni.getSystemInfo({
				success: (res) => {
					this.windowsHeight = res.windowHeight
				}
			})

			wx.login({
				success: (res) => {

					login({
						"jsCode": res.code
					}).then((res) => {
						console.log(res)
						wx.setStorageSync('token', res.data.token)

						this.$store.state.userInfo = res.data.userInfo

						getTypeList().then((res) => {
							this.$store.state.typeList = res.data
						})
					})
				}
			})


		},
		methods: {
			toGood(good) {
				uni.navigateTo({
					url: '/pages/good/good'
				})
				this.$store.state.good = good;
			},
			imageHandle(imgSrc) {
				return config.baseURL + imgSrc + "";
			},
			changeGood(e) {
				setTimeout(() => {
					if (e.num == 0) {
						this.$store.state.goodCart.forEach((item, index) => {
							if (item.id == e.id) {
								this.$store.state.goodCart.splice(index, 1)
							}
						})

					} else {

						if (this.$store.state.goodCart.length <= 0) {
							this.$store.state.goodCart.push(e);

							return;
						}
						var flag = true;
						this.$store.state.goodCart.forEach((item, index) => {
							if (item.id == e.id) {

								item.num = e.num;
								flag = false;
							}

						})
						if (flag)
							this.$store.state.goodCart.push(e);
					}
				}, 10)

			},

			typeHandle(item) {

				this.clickedIndex = item;
				this.toView = "aa" + item;
			},

			sub_close() {
				this.sub_show = false

			},

			add_good_close() {
				this.add_good_show = false
			},
			shopCart() {

				this.add_good_show = true
			},
			toBuy() {
				setTimeout(() => {
					this.sub_show = true
				}, 20)
			},
			toPay() {
				//请求数据

				subOrder({
						"goodCart": this.$store.state.goodCart,
						"tableId": this.$store.state.tableId
					}

				).then((res) => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '/pages/pay/pay?order=' + encodeURIComponent(JSON.stringify(res.data
								.order))
						})
					} else {
						this.$refs.uToast1.show({
							type: 'error',
							message: res.msg,
							duration: "1000",
							complete(e){
								uni.navigateTo({
									url: '/pages/orderDetail/orderDetail?orderId='+encodeURIComponent(JSON.stringify(res.data))
								})
							}
						})
					}

				})

			},
			
		},
		computed: {
			...mapState(["goodCart", "typeList", "amount", "count", "tableId"]),
			f1() {
				return this.$store.state.goodCart
			},
			lastGoodStyle() {
				return '--last:' + (this.windowsHeight - 170) + 'px';
			}

		},
		onShow() {
			this.sub_show = false;
			this.add_good_show = false;
		},
		watch: {
			'f1': {
				deep: true,
				handler(newVal, oldVal) {
					this.$store.state.amount = 0
					this.$store.state.count = 0
					newVal.forEach((good) => {
						this.$store.state.amount += good.price * good.num
						this.$store.state.count += good.num

					})

				}
			}
		}

	}
</script>

<style lang="scss">
	.pop {
		background-color: #f4f4f4;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;



		.sub_order_box {
			width: 95%;
			height: auto;
			background-color: white;
			margin: 0 auto;

			border-radius: 10px;

			.u_cell:last-child {
				margin-bottom: 75px;
			}

			.minus {
				width: 15px;
				height: 15px;
				opacity: 0.8;
				border-width: 1px;
				border-color: #E6E6E6;
				border-top-left-radius: 100px;
				border-top-right-radius: 100px;
				border-bottom-left-radius: 100px;
				border-bottom-right-radius: 100px;
				@include flex;
				justify-content: center;
				align-items: center;
			}

			.input {
				padding: 0 10px;
				height: 15px;
				font-size: 12px;
			}

			.plus {
				width: 15px;
				height: 15px;
				background-color: #FF0000;
				border-radius: 50%;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
			}

			.title {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin-right: 50px;
			}

			.price {
				color: red;

			}
		}
	}

	.topInfo {
		width: 100%;
		height: 70px;
		background-color: aqua;
	}

	.list {
		width: 100%;
		// background-color: bisque;
		// z-index: 999;
		display: flex;
		border-top: solid 1px #b7b7b7;
		justify-content: space-between;

		.left {
			width: 20%;
			height: 100%;
			background-color: #f4f4f4;

			.type {
				width: 100%;
				height: 40px;


				display: flex;
				border-radius: 5px;
				overflow: hidden;

				.redline {
					width: 3%;
					height: 60%;
					margin: auto 0;
					// background-color: red;
				}

				.typeInfo {
					width: 97%;
					height: 100%;
					// background-color: aqua;
					text-align: center;
					line-height: 40px;
					font-size: 12px;
					font-family: Georgia, 'Times New Roman', Times, serif;
				}
			}
		}

		.right {
			width: 80%;
			height: 100%;

			// background-color: brown;
			.title_good_box:last-child:last-child {
				padding-bottom: var(--last)
			}

			.title_good_box {

				width: 90%;
				margin: 0 auto;

				.type_title {
					width: 100%;
					height: 40px;
					//background-color: aqua;


					font: 13px/1.5 Tahoma, Helvetica, Arial, '宋体', sans-serif;
					line-height: 40px;
				}

				.one_good {

					width: 100%;
					height: 120px;
					//background-color: beige;
					display: flex;
					margin-bottom: 20px;

					.img {
						width: 105px;
						height: 100px;
						//background-color: aquamarine;

						image {
							width: 100px;
							height: 100%;
							border-radius: 8px;
						}
					}

					.goodInfo {
						flex: 1;
						//background-color: blue;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.good_title {
							width: 100%;
							// height: 40px;
							//background-color: indianred;
							font-family: "黑体";
							font-size: 18px;
							letter-spacing: 1.5px;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}

						.good_desc {
							width: 100%;
							height: 0px;
							//background-color: green;
							font-size: 12.5px;
							font-family: "楷体";
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							color: #b7b7b7;
						}

						.good_count {
							display: inline-block;
							//background-color: yellow;
							height: 20px;

							margin-top: 5px;
							font-size: 12px;
							font-family: "宋体";
							line-height: 20px;
							font-weight: bold;
							padding-right: 2px;
							color: #c7c7c7;

						}

						.good_price {
							width: 100%;
							height: 30px;
							//background-color: blueviolet;
							position: relative;
							margin-bottom: 8px;

							.text {
								color: red;
								font-weight: bold;
								font-size: 15px;
								width: 50%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								height: 100%;
							}

							.num_box {
								position: absolute;
								right: 0;
								top: 3px;
								height: 100%;
								width: auto;
								background-color: white;

								.minus {
									width: 15px;
									height: 15px;
									opacity: 0.8;
									border-width: 1px;
									border-color: #E6E6E6;
									border-top-left-radius: 100px;
									border-top-right-radius: 100px;
									border-bottom-left-radius: 100px;
									border-bottom-right-radius: 100px;
									@include flex;
									justify-content: center;
									align-items: center;
								}

								.input {
									padding: 0 10px;
									height: 15px;
									font-size: 12px;
								}

								.plus {
									width: 15px;
									height: 15px;
									background-color: #FF0000;
									border-radius: 50%;
									/* #ifndef APP-NVUE */
									display: flex;
									/* #endif */
									justify-content: center;
									align-items: center;
								}
							}
						}
					}
				}
			}

		}
	}

	.buy_bottom,
	.order_bottom {
		position: absolute;
		width: 100%;
		height: 50px;
		z-index: 999;
		//background-color: #FF0000;
		bottom: 2px;

		.buy_box {
			height: 100%;
			width: 85%;
			background-color: black;
			margin: 0 auto;
			border-radius: 25px;
			display: flex;
			overflow: hidden;

			.left {
				width: 70%;
				height: 100%;
				//background-color: bisque;
				display: flex;

				.img {
					position: relative;
					width: 50px;
					height: 50px;
					margin-left: 25px;

					//background-color: #b7b7b7;
					image {
						width: 100%;
						height: 100%;
					}

				}

				.price {
					color: red;
					line-height: 50px;
					font-size: 20px;
					margin-left: 5px;
					color: white;
				}
			}

			.right {
				width: 30%;
				height: 100%;
				background-color: #FF0000;
				line-height: 50px;
				text-align: center;
				color: white;
			}
		}
	}
</style>